<template>
    <div id="temp1">
        <ul class="mui-table-view mui-grid-view">
            <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in list">
                <router-link :to="'/goods/goodsinfo/'+item.id" class="imgs">
                    <img class="mui-media-object" :src="item.img_url">
                    <div class="mui-media-body">
                        <p class="title">{{item.title}}</p>
                        <div class="dark">
                            <p>
                                <span class="sell">￥:{{item.sell_price}}</span>
                                <del class="market">￥:{{item.market_price}}</del>
                            </p>
                            <p>
                                <span class="hot">热卖中</span>
                                <span class="quan">剩{{item.stock_quantity}}件</span>
                            </p>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
        <mt-button type="primary" size='large' @click="getmore">获取更多</mt-button>
    </div>
</template>
<script>
    import common from '../../common.js'
    export default {
        data() {
            return {
                list: [],
                pageindex: 1,
            }
        },
        created() {
            this.getlist();
        },
        methods: {
            getlist() {
                var url = common.temurl + '/api/getgoods?pageindex=' + this.pageindex;
                this.$http.get(url).then(function (res) {
                    this.list = this.list.concat(res.body.message);
                })
            },
            getmore() {
                this.pageindex++;
                this.getlist(this.pageindex);
            }
        },
    };
</script>
<style scoped>
    .imags {
        border: 1px solid rgb(221, 211, 211);
        margin-top: 5px;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
        height: auto;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn) {
        margin: 5px 0 0 -25px;
        border: 1px solid rgb(156, 152, 152);
    }

    .mui-table-view-cell>a:not(.mui-btn) {
        padding: 0;
    }

    .mui-table-view.mui-grid-view {
        padding-right: 0px;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell {

        padding: 10px 0 0 30px;

    }
    .title {
        font-size: 14px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 10px;
    }
    .dark {
        background: rgba(0, 0, 1, 0.1)
    }

    .dark p {
        line-height: 30px;
        overflow: hidden;
    }

    .sell,.hot {
        float: left;
    }

    .market,.quan {
        float: right
    }

    .market {
        margin-right: 25px;
        color: rgb(212, 110, 110);
    }

    .quan {
        margin-right: 10px;
    }
</style>